<template>
  <page-view>
    <div class="expectList" @touchstart.stop>
      <div class="expectItem" v-for="(item,index) in expectList" :data-id="item.id" @click="goDetail" :key="index" >
        <img v-lazy="item.img.replace('w.h','128.180')"  @click.stop="previewImage(index,expectList)" alt />
        <div class="nm">{{item.nm}}</div>
        <div>{{item.comingTitle}}</div>
      </div>
    </div>
    <movie-item @showImage="previewImage(index,comingList)" v-for="(item,index) in comingList" :key="index" :item="item" :index="index"></movie-item>
  </page-view>
</template>
<script>
import MovieItem from "../components/MovieItem.vue";
import {mapActions} from "vuex"
export default {
  name: "Coming",
  data() {
    return {
      comingList: [],
      expectList: []
    };
  },
  created() {
    this.getComingList();
    this.getExpectList();
  },
  methods: {
      ...mapActions(["showPreviewImage"]),
    async getComingList() {
      let resp = await this.$http.get("/maoyanApi/ajax/comingList", {
        params: {
          ci: 57,
          limit: 20,
          token: ""
        }
      });
      this.comingList = resp.data.coming;
    },
    async getExpectList() {
      let resp = await this.$http.get(
        "/maoyanApi/ajax/mostExpected?ci=57&limit=10&offset=0&token="
      );
      this.expectList = resp.data.coming;
    },
    previewImageUrls(arr) {
      let imgWidth = document.documentElement.clientWidth;
      let imgHeight = parseInt((imgWidth * 180) / 128);
      return arr.map(item => {
        return item.img.replace("w.h", `${imgWidth}.${imgHeight}`);
      });
    },
    previewImage(index,arr){
        this.showPreviewImage({
            urls:this.previewImageUrls(arr),
            current:index
        })
    },
    goDetail(event) {
      this.$router.push({
        path: `/Detail/${event.currentTarget.dataset.id}`
      });
    }
  },
  components: {
    MovieItem
  }
};
</script>
<style lang="scss" scoped>
.expectList {
  display: flex;
  padding: 0.08rem;
  box-sizing: border-box;
  overflow: auto;
  .expectItem {
    width: 2.56rem * 0.7;
    margin:0 0.04rem;
    > img {
      height: 3.6rem * 0.7;
    }
    > div {
      width: 100%;
      text-align: center;
      font-size: .24rem;
      &.nm {
        font-weight: bold;
      }
    }
  }
}
</style>